3️⃣ UX 小技巧

1.保持簡潔：只問必要的欄位，太多會讓人放棄。

2.加上 placeholder：讓使用者知道該輸入什麼。

3.表單驗證：用 required、pattern 或 JavaScript 確保輸入正確。

4.回饋訊息：錯誤時要告訴使用者哪裡填錯。

CSS
input:invalid {
  border: 2px solid red;
}

5.行動裝置優化：輸入 email 時可用 type="email"，手機鍵盤會自動顯示 @。

4️⃣ 小範例 – 聯絡我們表單

HTML
<form action="/contact" method="POST">
  <input type="text" name="name" placeholder="您的姓名" required>
  <input type="email" name="email" placeholder="您的 Email" required>
  <textarea name="message" rows="4" placeholder="您的訊息"></textarea>
  <button type="submit">送出</button>
</form>

🎯 總結

• 表單核心： 包含各種 、、。

• 必填與驗證：用 required、type、pattern。

• 使用者體驗：簡潔、提示清楚、錯誤回饋、行動裝置友善。